<template>
	<div class="formData">
		<el-form ref="ruleForm" :model="formData" :rules="rules" :inline="true" label-width="80">
			<el-form-item label="泊位" prop="berthName">
				<el-input v-model="formData.berthName" placeholder="请输入泊位" />
			</el-form-item>
			<el-form-item label="泊位代码" prop="berthCode">
				<el-input v-model="formData.berthCode" placeholder="请输入泊位代码" />
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<Select placeholder="请选择状态" :selectData="selects.statusList" v-model:value="formData.status" />
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="dict">
	import Select from '@/components/Select/index.vue'
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
	const ruleForm = ref()
	const selects = ref({
		statusList:[
			{label:'停用',value:1},
			{label:'在用',value:0}
		]
	})
	const formData = ref({
		berthName: '',
		berthCode: '',
		dockId: '',
		dockName:'',
		portAreaCode: '04',
		portAreaName:'滨州港区',
		status:0
	})
	const rules = reactive({
		berthName: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}, ],
		berthCode: [{
			required: true,
			message: '不能为空',
			trigger: 'blur'
		}, ]
	})

	const validate = async () => {
		let flag = false
		await ruleForm.value.validate((valid, fields) => {
			if (valid) {
				flag = true
			} else {
				flag = false
			}
		})
		return flag
	}
	const resetForm = () => {
		formData.id = ''
		ruleForm.value.resetFields()
	}
	defineExpose({
		validate,
		resetForm,
		formData,
	})
</script>
<style scoped>
	/* @import '@/assets/styles/formData.scss'; */
	.el-form-item{
		display: flex;
	}
</style>